<template>
    <el-dialog
            :title="title"
            :visible.sync="isVisible"
            :width="width"
            :before-close="handleClose"
            :lock-scroll="true"
            :close-on-click-modal="false"
            custom-class="pub_dialog"
            @open="getData"
    >
        <VForm
                ref="vformComponents"
                :form="formData.form"
                :options="formData.options"
                :rules="formData.rules"
                :labelWidth="formData.labelWidth"
                :rowspan="rowspan"
        ></VForm>

      <div class="formTitle-root">
        <div class="form-title-p">等级处置时限</div>
      </div>

      <div>
        <el-table :data="dealLimitList" border>
          <el-table-column prop="levelLabel" label="等级">
            <template slot-scope="scope">
                <el-input
                  type="text"
                  v-model="scope.row.levelLabel"
                  :disabled = true
                ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="处置时限类型">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.type"
                :disabled = "openType=='detail'"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="limitUnit" label="时限单位">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.limitUnit"
                :disabled = "openType=='detail'"
              >
                <el-option
                  v-for="item in limitUnitOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="limitNum" label="处置时限值">
            <template slot-scope="scope">
              <el-input
                type="number"
                v-model="scope.row.limitNum"
                :disabled = "openType=='detail'"
                placeholder="处置时限值（整数）"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>

        <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
    import { alarmDealConfigDetail,
            alarmDealConfigUpdate,
            alarmDealConfigAdd } from '@/api/alarm/dealConfig'
    import VForm from "@/components/VForm/index";
    export default {
        components: {
            VForm,
        },
        props: {
            width: {
                type: String,
                default: "70%",
            },
            title: {
                type: String,
                default: "详情",
            },
            id:{},
            openType:{
                type:String,
                default:"add"
            },
            dialogVisible: {
                type: Boolean,
                default: false
            },
           modeTypeFormatOptions:{},
           typeOptions:{},
           limitUnitOptions:{},
        },
        watch: {
            'width': {
                handler(newVal, oldVal) {
                    console.log('newVal===',newVal, oldVal)
                    let w = this.width.split('%')[0]
                    if(w>=60){
                        this.rowspan = 2
                    }else{
                        this.rowspan = 1
                    }
                },
                deep: true,
                immediate: true
            },
            'modeTypeFormatOptions':{
                handler(newVal, oldVal) {
                    this.formData.options.forEach(t=>{
                        if(t.key=='modeType'){
                        t.option.data = newVal
                    }
                })
                },
                deep: true,
                immediate: true
            },
            'openType':{
              handler(newVal, oldVal) {
                // 判断是否详情，添加不可编辑标识
                this.formData.options.forEach(t=>{
                  t.disabled = newVal=='detail' ? true : false
                  if(newVal=='edit'){
                     if(t.key == 'modeType'){
                        t.disabled = true
                     }
                  }
                  console.log("t=====>",t)
                })
              },
              deep: true,
              immediate: true
            }
        },
        computed: {
            isVisible: {
                get() {
                    return this.dialogVisible
                },
                set() {
                    this.close()
                }
            }
        },
        data() {
            return {
                rowspan:1,
                dict:{},
                formData: {
                    form: {
                            code:"",
                            type:"",
                            modeType:"",
                            dealJson:"",
                            remark:"",
                        },
                    options: [
                                 {
                                     title: "标识码",
                                     key: "code",
                                     type: "text",
                                     disabled: false
                                 },
                                {
                                    title: "报警类型",
                                    key: "modeType",
                                    type: "cascader",
                                    multiple:false,
                                    option: {
                                        data: this.modeTypeFormatOptions,
                                        props: {
                                            label: "label", // 指定label对应data的字段
                                            value: "value", // 指定value对应data的字段
                                        },
                                    },
                                    disabled: false
                                },
                               {
                                   title: "备注",
                                   key: "remark",
                                   type: "textarea",
                                   columnWidth: 'w100max',
                                   disabled: false
                               },
                    ],
                    rules: {
                        code :[
                          { required: true, message: '请输入', trigger: 'blur' },
                          {max:36, message: '长度最大为36个字符', trigger: 'blur'}
                        ],
                        modeType :[
                          { required: true, message: '请输入', trigger: 'change' },
                        ],
                        remark :[
                          {max:128, message: '长度最大为128个字符', trigger: 'blur'}
                        ],
                    },
                    labelWidth: "140px",
                },
                dealLimitList:[],
                // 字典
            };
        },
        methods: {
            submitFormat(params={}){
                // （1报警 2预警）
                params.type = 1
                params.modeType =this.formData.form.modeType.toString()
                params.dealJson = JSON.stringify(this.dealLimitList)
                return params
            },
            loadFormat(){
              this.formData.form.modeType = this.formData.form.modeType.split(",")
              this.dealLimitList = JSON.parse(this.formData.form.dealJson)
            },
            isBlank(val){
               if(val==null || val =='' || val == undefined){
                 return true
               }
               return false
            },
            sure(){
                console.log('sure===',this.formData.form)
                this.$refs.vformComponents.$refs.form.validate().then(res=>{
                   for(let i =0; i<this.dealLimitList.length; i++){
                     let item = this.dealLimitList[i]
                      if(item.type==1 && (this.isBlank(item.limitUnit) || this.isBlank(item.limitNum))){
                          this.$message.warning("限制类型请补全信息！")
                          return;
                      }
                   }
                  let param = this.submitFormat(this.formData.form)
                  if(this.openType == "add"){
                        this.add(param)
                    }else{
                        this.update(param)
                    }
                })
            },
            add(param){
                param.id = null
                alarmDealConfigAdd(param).then(res=>{
                    if(res.code==200){
                    this.$message({
                        message: this.$t('tips.createSuccess'),
                        type: 'success'
                    })
                    this.closeSuccess()
                    }else{
                    this.$message({
                        message: res.message,
                        type: 'error'
                    })
                    }
                })
            },
            update(param){
                   alarmDealConfigUpdate(param).then(res=>{
                        if(res.code==200){
                        this.$message({
                             message: this.$t('tips.updateSuccess'),
                            type: 'success'
                        })
                        this.closeSuccess()
                      }else{
                        this.$message({
                            message: this.$t('tips.systemException'),
                            type: 'error'
                        })
                     }
                })
            },
            cancel(){
                this.close()
            },
            handleClose(done) {
                done()
                this.close()
            },
            closeSuccess(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$emit('success')
            },
            close(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$emit('close')
            },
            getData(){
                this.dealLimitList = [
                  {levelLabel:"一级报警", level:1 , type:0, limitUnit:"" , limitNum:""},
                  {levelLabel:"二级报警", level:2 , type:0, limitUnit:"" , limitNum:""},
                  {levelLabel:"三级报警", level:3 , type:0, limitUnit:"" , limitNum:""},
                ]
                if(this.openType!="add"){
                    alarmDealConfigDetail(this.id).then(res=>{
                        if(res.code==200){
                            this.formData.form = res.data
                            this.loadFormat()
                         }else{
                            this.$message({
                                message: this.$t('tips.systemException'),
                                type: 'error'
                            })
                        }
                    })
                }
            }
        },
    };
</script>

<style lang="scss"  scoped>
  @import "@/styles/element-variables.scss";
  .formTitle-root{
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 16px;
    position: relative;
    margin-bottom: 10px;
    .form-title-p{
      padding-left: 10px;
      border-left: 4px solid $--color-primary;
    }
  }
  /*修改禁用样式*/
  ::v-deep .is-disabled .el-input__inner  {
    background-color:white;
    color: rgb(0, 0, 0);
  }
  ::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
    border-color: $--color-primary;
    background: $--color-primary;
  }
  ::v-deep .el-radio__input.is-disabled + span.el-radio__label{
    color: rgb(0, 0, 0);
  }
  ::v-deep .el-textarea.is-disabled .el-textarea__inner{
    background: white;
    color: rgb(0, 0, 0);
  }
  // numberInput样式 css
  ::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  ::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
  }
</style>
